import { useEffect, useState } from 'react';
import { get } from '../services/api';
import GradeTable from '../components/GradeTable';
import GradeForm from '../components/GradeForm'; 

function GradesPage() {
    const [grades, setGrades] = useState([]);
    const [showForm, setShowForm] = useState(false);

useEffect(() => {
    get('/api/grades')
    .then(response => setGrades(response.data))
    .catch(error => console.error(error));
}, []);

return (
    <div>
    <h1>Grades</h1>
    <button onClick={() => setShowForm(true)}>Add Grade</button>
    {showForm && <GradeForm onClose={() => setShowForm(false)} />}
    <GradeTable grades={grades} />
    </div>
);
}

export default GradesPage;